<template>
  <div class="box" ref="div">
  
  </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue'
import * as echarts from 'echarts'
import {getmap} from '../../request/index'

let div=ref()

let mapstart=[
  {
    adcode:100000,
    city:'中国'
  }
]



let fun=(adcode,name)=>{
  getmap(adcode).then(res=>{
    console.log(res,'中国');
    var myChart =echarts.init(div.value)
    echarts.registerMap(name,res.data)
    let option={
      visualMap:{
        min:1,
        max:200,
        text:['High','Low'],
        realtime:true,
        calculable:true,
        show:false,
        inRange:{
          color:['lightskyblue','yellow','orangered']
        }
      },
      series:[
        {
          name:name,
          type:'map',
          map:name,
          label:{
            show:true
          },
          data:res.data.features.map((item,index)=>{
            return{
              name:item.properties.name,
              value:item.properties.childrenNum,
              adcode:item.properties.adcode
            }
          })
        }
      ]
    }
    myChart.setOption(option)
    myChart.off('click',onclick);
    myChart.off('contextmenu',oncontextmenu)
    myChart.on('click',function(e){
      console.log(e);
      mapstart.push({
        adcode:e.data.adcode,
        name:e.data.name
      })
      fun(e.data.adcode,e.data.name)
    })

    myChart.on('contextmenu',function(e){
        e.event.stop();
        console.log(e);
        mapstart.pop();
        let {adcode,name}=mapstart[mapstart.length-1];
        fun(adcode,name);
    });
    window.addEventListener('resize',function(){
      myChart.resize()
    })

  })
}

onMounted(()=>{
  fun(100000,'中国')
})


</script>

<style>

.box{
  width: 100%;
  height: 70%;
}


</style>
